<template>
  <el-dialog v-if="dialogVisible"
             title="总费用明细"
             width="900px"
             :visible.sync="dialogVisible"
             :before-close="handleClose">
    <div class="content_box">
      <div class="content-module">
        <label>运单属性</label>
        <div>合同编号：{{wayDetails.contractNo}}</div>
      </div>
      <div class="waybill-info">
        <el-row :gutter="4">
          <el-col :span="12">
            <descriptions v-if="customer"
                          :info="Object.assign({}, customer, fromAddress)"
                          :isQuote="true"
                          :company="customer.customerName"
                          type="sender" />
          </el-col>
          <el-col :span="12">
            <descriptions v-if="consignee"
                          :info="Object.assign({}, consignee, toAddress)"
                          :isQuote="true"
                          :company="consignee.consigneeName"
                          type="consign" />
          </el-col>
        </el-row>
        <DescriptionsPanel class="plr20"
                           :element-array="orderAttribute"
                           :element-data="elementData" />
      </div>
      <ModuleTitle :title="'运单费用'"
                   :tag-label="tagLabel"
                   :tag-view="tagView" />
      <div v-if="combineId"
           class="tips">
        <icon-svg class-name="iconClass mlr"
                  icon-name="tishi" />
        此运单被合单，运单费用根据合单费用按照一定的计算公式进行分摊。
      </div>
      <transport-quote v-if="wayBillColumn.length"
                       class="mt15"
                       disabled
                       :title="'运单费用类型明细'"
                       :dataList="priceList"
                       :quotation-column="wayBillColumn" />
      <TemplateDetail v-if="matchId && !combineId"
                      :title="'运单匹配合约明细'"
                      :record="record"
                      :description="description"
                      :custom="custom" />
      <SurchargeFee class="mb20"
                    title="运单补充费用明细"
                    :data-list="surchargeFees" />
      <CombineAttribute v-if="combineId"
                        :combineId="combineId"
                        :record="record"
                        :description="description"
                        :custom="custom" />
    </div>
  </el-dialog>
</template>
<script>
import Descriptions from "@/components/orderDetail/Descriptions.vue";
import TransportQuote from "@/views/quote/transport/components/TransportQuote.vue";
import SurchargeFee from "@/views/quote/transport/components/SurchargeFee.vue";
import DescriptionsPanel from "./Descriptions.vue"
import ModuleTitle from "./ModuleTitle.vue"
import TemplateDetail from "./TemplateDetail.vue"
import CombineAttribute from "./CombineAttribute.vue"
import { volumeOrWeightConversion, returnThousandDigit } from "@/libs/util.js";
import { quotation, transport } from "@/api/index";
import { orderAttribute, transportModeKey } from "@components/orderDetail/orderData";
import WaybillMixin from "@/components/waybill/waybill.mixin";

export default {
  name: "FreeDetail",
  components: {
    DescriptionsPanel,
    ModuleTitle,
    TemplateDetail,
    CombineAttribute,
    Descriptions,
    TransportQuote,
    SurchargeFee
  },
  mixins: [WaybillMixin],
  props: {
    row: {
      type: Object,
      default: () => { }
    },
    dialogVisible: {
      type: Boolean,
      default: false
    },
    waybillId: {
      type: Number,
      default: null
    }
  },
  data () {
    return {
      orderAttribute,
      wayDetails: {}, //运单详情
      waybillCaches: {},
      priceList: [], //报价费用
      surchargeFees: [], //补充费用
      matchId: null,
      combineId: null,
      tagView: 0,
      record: [], //匹配记录
      custom: {
        status: null
      },
      description: []
    };
  },
  computed: {
    elementData () {
      const { transportRequirement = {} } = this.wayDetails;
      let modeKey = transportModeKey;
      modeKey.forEach(i => {
        if (transportRequirement[i.key]) {
          i.value = transportRequirement[i.key]
        }
      })
      return {
        ...transportRequirement,
        ...this.waybillCaches,
        transportMode: modeKey,
        calculateValue: this.waybillCaches?.calculateValue ? returnThousandDigit(this.waybillCaches.calculateValue, 2) : 0
      }
    },
    tagLabel () {
      return this.matchId ? '匹配合约' : '手动报价'
    }
  },
  created () {
    this.getTransportDetail();
  },
  methods: {
    handleClose () {
      this.$emit("update:dialogVisible", false);
    },
    async getTransportDetail () {
      let { data } = await transport.getDetail(this.waybillId);
      this.getQuoteDetail();
      this.wayDetails = data;
      this.combineId = data?.combineId;
      this.tagView = !data?.combine;
      const { transportRequirement: { chargeMode, pricingUnit } } = data;

      orderAttribute[1].label = "总重量(公斤)";
      orderAttribute[2].label = "总体积(方)";
      // 运单计费模式为重量 计费单位为吨
      if (chargeMode === 1 && pricingUnit === 2) {
        data.waybillCache.calculateWeight = volumeOrWeightConversion(0, data.waybillCache.calculateWeight);
        orderAttribute[1].label = "总重量(吨)";
      }
      // 运单计费模式为体积 计费单位为升
      if (chargeMode === 2 && pricingUnit === 4) {
        data.waybillCache.calculateVolume = volumeOrWeightConversion(1, data.waybillCache.calculateVolume);
        orderAttribute[2].label = "总体积(升)";
      }
      this.waybillCaches = data.waybillCache;
    },
    async getQuoteDetail () {
      let { code, data } = await quotation.getValidWaybillQuotation(this.waybillId);
      if (code !== 0) return;
      if (data) {
        if (data?.matchId) {
          this.matchId = data.matchId;
          this.getMatch();
        }
        // 运单费用初始值
        this.priceList = [
          {
            pick: data?.pickFee || 0, //提货费
            deliver: data?.deliverFee || 0, //送货费
            onLoad: data?.loadFee || 0, //装货费
            offLoad: data?.unloadFee || 0, //卸货费
            insure: data?.insureFee || 0, //保险费
            tax: data?.taxFee || 0, // 税费
            minCost: data?.minimumFee || 0 // 最低费用
          }
        ];
        // transportMode 1零担 2整车
        if (this.wayDetails.transportRequirement.transportMode === 1) {
          this.priceList[0].less = data?.transportFee || 0;
        } else {
          this.priceList[0].full = data?.transportFee || 0;
        }
        // 补充费用
        this.surchargeFees = data?.surchargeFees || [];

        this.priceList[0].surchargeFee = data?.surchargeFee || 0;
        this.priceList[0].totalFee = data?.totalFee || 0;
      }
    },
    async getMatch () {
      const { data } = await quotation.getMatch(this.matchId);
      this.record = [{ ...data }]
      this.custom.status = data.status
      this.description = data?.description ? data?.description.split("\r\n") : []
    },
  }
};
</script>
<style lang="scss" scoped>
.content_box {
  max-height: 680px;
  padding: 0;
  overflow-x: hidden;
}
.tips {
  color: var(--prev-color-primary);
  line-height: 26px;
  margin-top: 5px;
}
.content-module {
  background-color: var(--prev-border-color-extra-grey);
  display: flex;
  justify-content: space-between;
  padding: 10px;
}
.waybill-info {
  padding: 10px 36px 25px;
}
.plr20 {
  padding: 0 20px;
}
.mt15 {
  margin-top: 15px;
}
</style>
